<script>
import echarts from 'echarts'
import TimeQuery from './TimeQuery'
import { getWeatherInfo, getAnalysisByType } from 'services/x-start/mgr/common'

export default {
  data() {
    return {
      typeList: [
        { name: '温度', value: '0' },
        { name: '湿度', value: '1' },
        { name: 'PM2.5', value: '2' },
      ],
      currentType: '0',
      weatherInfo: {},
      formData: {},
    }
  },
  created() {
    this.getWeatherInfo()
  },
  components: { TimeQuery },
  methods: {
    update(to) {
      this.getWeatherInfo(to && to.params && to.params.id)
    },
    getWeatherInfo(id) {
      getWeatherInfo({
        ...this.formData,
        type: id || this.$route.params.id,
        ctype: this.currentType,
      })
        .then(res => {
          this.weatherInfo = res
          this.init()
        })
        .catch(({ payload }) => {
          this.$message.error(payload && payload.msg)
        })
    },
    init() {
      this.draw({
        ref: 'charts1',
        x: Object.keys(this.weatherInfo.dayNum),
        y: Object.values(this.weatherInfo.dayNum),
        type: 'bar',
      })
      this.draw({
        ref: 'charts2',
        x: Object.keys(this.weatherInfo.HumanNumAvg),
        y: Object.values(this.weatherInfo.HumanNumAvg),
        type: 'bar',
      })
      this.draw({
        ref: 'charts3',
        x: Object.keys(this.weatherInfo.wenduTrend),
        y: Object.values(this.weatherInfo.wenduTrend),
        color: 'red',
      })
    },
    draw({ ref, name = '', x = [], y = [], type = 'line', color = '' }) {
      let dom = echarts.init(this.$refs[ref])
      dom.setOption({
        title: {
          text: name,
          x: 'center',
        },
        color: [color || '#4472C4'],
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: x,
          axisLine: {
            lineStyle: {
              color: '#999', // 颜色
            },
          },
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: y,
            type: type,
            barWidth: 20,
            itemStyle: {
              emphasis: {
                barBorderRadius: 25,
              },
              normal: {
                barBorderRadius: 25,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#feaea2' },
                  { offset: 1, color: '#fd7270' },
                ]),
              },
            },
          },
        ],
      })
    },
    getAnalysisByType(data) {
      getAnalysisByType({
        ...this.formData,
        type: this.$route.params.id,
        ctype: this.currentType,
      }).then(res => {
        this.weatherInfo.wenduTrend = res
        this.draw({
          ref: 'charts3',
          x: Object.keys(this.weatherInfo.wenduTrend),
          y: Object.values(this.weatherInfo.wenduTrend),
          color: 'red',
        })
      })
    },
    typechange(data) {
      this.formData = data
      this.getWeatherInfo()
    },
  },
  watch: {
    currentType() {
      this.getAnalysisByType()
    },
  },
}
</script>

<template lang="pug">
.v-weather
  TimeQuery(@typechange="typechange")
  .content
    .left
      .warehouse
        .title 各种气侯天数
        .draw(ref="charts1")
    .right
      .warehouse
        .title 各种气侯的日均人数
        .draw(ref="charts2")
  .content.bottom
    .warehouse
      el-radio-group(v-model="currentType")
        el-radio-button(v-for="item in typeList"  :key="item.name" :label="item.value") {{item.name}}
      .draw(ref="charts3")
</template>
<style lang="stylus" scoped>
.content
  display flex
  .left
    flex 1
  .right
    flex 0 0 50%
    margin-left 20px
  &.bottom
    width 100%
    .warehouse
      flex 1
  .warehouse
    background-color #fff
    padding 10px 20px
    margin-bottom 20px
    box-sizing border-box
    text-align left
    .text
      color #5c5c5c
      line-height 2em
      .time
        >p
          display inline-block
    .draw
      height 400px
    .title
      color #424857
      font-size 16px
      position relative
      padding-left 20px
      line-height 36px
      border-bottom 1px solid #e3e6ec
      text-align left
      &:after
        content ''
        display block
        width 3px
        height 16px
        top 50%
        left 0
        margin-top -8px
        background-color #FF6D60
        position absolute
@media screen and (max-width: 650px)
  .content
    display block
    .right
      margin-left 0
    .warehouse
      .draw
        height 250px
</style>
